<template>
    <div class="pad">
        <!-- search start -->
            <!--<searchBar/>-->
        <!-- search end -->

        <!-- table start -->
            <tableDataEl
                :page.sync="page"
                :pageSize.sync="pageSize"
                :tableData="tableData.list"
                :tableLabel="tableLabel"
                @handleDetail="handleDetail"
                v-loading="loading"
                height="89vh"
                :pageCount="tableData.rows"
            />
        <!-- table end -->

        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDetail"
            center
            title="物料详情"
            width="35%"
            v-el-drag-dialog
        >
            <el-table
                :data="detailData.list"
                border
                v-loading="detailLoading"
            >
                <el-table-column
                    label="物料名称"
                    prop="materiel"
                    align="center"
                />
                <el-table-column
                    label="数量"
                    prop="num"
                    align="center"
                />
            </el-table>
            <el-form>
                <el-form-item label="详细地址:">
                    {{address}}
                </el-form-item>
            </el-form>
            <div class="operation">
                <el-button type="primary" @click="through">通过</el-button>
                <el-button type="warning" @click="isShowChild = true">驳回</el-button>
            </div>
            <el-dialog
                :visible.sync="isShowChild"
                center
                title="驳回理由"
                width="30%"
                append-to-body
                v-el-drag-dialog
                @close="$refs['form'].resetFields()"
            >
                <el-form
                        label-width="80px"
                        label-position="left"
                        :model="rejectText"
                        ref="form"
                >
                    <el-form-item
                        label="驳回理由"
                        prop="text"
                        :rules="[
                            {required: true,message: '请输入驳回理由', trigger: 'blur'}
                        ]"
                    >
                        <el-input v-model="rejectText.text" style="width:65%;margin-right:8%;"></el-input>
                        <el-button type="danger" @click="reject">驳回</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "material",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '运营山名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '电话',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '物料详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    }
                ],
                obj: {},
                isShowDetail: false,
                detailData: {},
                address: '',
                rejectText: {
                    text: ''
                },
                isShowChild: false,
                loading: false,
                detailLoading: false
            }
        },
        methods: {
            async init (search = '') {  //初始化
                this.loading = true;
                let paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize});
                let res = await this.api.waitList(paramsStr);
                res.code ? this.tableData= res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail (...value) {  //详情
                this.detailLoading = true;
                this.isShowDetail = true;
                this.address = '';
                let array = ['id','aid','company','phone'];
                let i=0;
                for(let key in value[1]) {
                    if(key === array[i]) {
                        this.obj[key] = value[1][key];
                        i++;
                    }
                }
                let res = await this.api.mateDetail({id: value[1]['id'],aid: value[1]['aid']});
                if( res.code ) {
                    this.detailData = res.data;
                    let address = res.data.address;
                    for(let item in address) {
                        this.address += address[item]
                    }
                }else {
                    this.$message(res.msg);
                }
                this.detailLoading = false;
            },
            async through () { //通过操作
                let res = await this.api.yysAdoptAudit(this.obj);
                this.$message({
                    type: res.code ? 'success' : 'error',
                    message: res.msg
                });
                this.init();
                this.isShowDetail = false;
            },
            async reject() {
                let flag = true;
                this.$refs['form'].validate((valid) => {
                    !valid ? flag = false : flag
                });
                if (flag) {
                    let res = await this.api.yysAdoptAudit(Object.assign(this.obj,{reason:this.rejectText.text}))
                    this.$message({
                        type: res.code ? 'success' : 'error',
                        message: res.msg
                    });
                    this.init();
                    this.isShowChild = false;
                    this.isShowDetail = false;
                }
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style scoped>
    .pad {
        padding:10px;
    }
    .operation {
        text-align:center;
    }
    .el-form-item {margin-bottom:5px;}
</style>
